<!--
 @description
 @fileName Tree.vue
 @author zengqiongying
 @created 2022/01/12 13:55:00
-->
<template>
  <div class="my-content-tree">
    <div style="margin-bottom:10px">
      <el-input
        v-model="filterText"
        size="mini"
        placeholder="输入关键字进行类目搜索"
      />
    </div>
    <div class="my-tree-box">
      <el-tree
        ref="tree"
        class="my-tree"
        :data="treeData"
        :props="{
          children: 'childrenCategorys',
          label: 'categoryName'
        }"
        node-key="id"
        :expand-on-click-node="true"
        :accordion="false"
        :default-expand-all="true"
        check-on-click-node
        :filter-node-method="filterTreeNode"
        @node-click="handleNodeClick"
      >
        <div slot-scope="{ node, data }" class="custom-tree-node">
          <span :class="{'bold':!node.isLeaf,'active':categoryId===data.id}">{{ node.label }}</span>
        </div>
      </el-tree>
    </div>
  </div>
</template>

<script>
import { getCategoryTree } from '@/api/category'
export default {
  name: 'ContentCateTree',
  props: {
    classifyCode: {
      type: String,
      default: ''
    },
    classifyName: {
      type: String,
      default: ''
    },
    noRequest: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      filterText: '',
      treeData: [],
      categoryId: ''
    }
  },

  computed: {},
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },

  created() {
    if (!this.noRequest) {
      this.getTree()
    }
  },
  methods: {
    getTree() {
      this.categoryId = 'all'
      getCategoryTree(this.classifyCode, 'content').then(res => {
        const list = res.data || []
        this.treeData = [
          ...[{ categoryName: '全部', id: 'all' }], ...list
        ]
        this.$emit('get-tree', this.treeData)
      })
    },
    handleNodeClick(data, node, el) {
      if (node.isLeaf) {
        this.categoryId = data.id
        this.$emit('change', data)
      }
    },
    filterTreeNode(value, data) {
      if (!value) return true
      return data.categoryName.indexOf(value) !== -1
    }
  }
}

</script>
<style lang='scss' scoped>
.my-content-tree{
  position: relative;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .my-tree-box{
    flex: 1;
    overflow: auto;
    @include scrollBar
  }
  /deep/ .el-tree-node__content{
    height: 36px;
    padding-top: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
    font-size: 14px;
  }
  .custom-tree-node{
    .bold{
      font-weight: bold;
    }
    .active{
      color: $--color-primary;
      font-weight: bold;
    }
  }
}
</style>
